<template>
	<!-- 我的交易 -->
	<view class="myTrade">
		<view class="container">
			<view class="w100 pb10 bgF fixhead"><u-tabs bar-width="70" :list="list" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs></view>
		</view>
		<view class="container" style="height: 92rpx;"></view>
		<view class="container" style="height: 1px;background: #f3f3f3;"></view>
		<!-- 待处理 -->
		<view v-if="current == 0">
			<view v-if="daiChuLi.length > 0">
				<view class="container flex-xy bgF pt20 pb20 mb20" v-for="(items, i) in daiChuLi" v-bind:key="i">
					<view class="w90 flex-spc-x pb20">
						<view class="flex-xy w50">
							<view class="w100 tal">
								<view class="co666 fs24">{{ items.createTime }}</view>
								<view class="co666 fs24" v-if="!!items.type">
									<text v-if="items.type == 1">XYB兑换成KB</text>
									<text v-if="items.type == 2">KB兑换成XYB</text>
								</view>
							</view>
						</view>

						<view class=""><u-button class="customButtonStyle" shape="circle" type="primary" :ripple="true" size="mini" plain @click="revoke(i)">撤销</u-button></view>
					</view>
					<view class="container" style="height: 1px;background: #f3f3f3;"></view>
					<view class="w90 flex-spc-x pt20">
						<view class="w30 fs28 tal">
							<view class="co333">{{ items.count }}</view>
							<view class="co999">求购数量</view>
						</view>
						<view class="w30 fs28 tac">
							<view class="co333">{{ items.money }}</view>
							<view class="co999">单价</view>
						</view>
						<view class="w30 fs28 tar">
							<view class="co333">{{ items.total }}</view>
							<view class="co999">总价</view>
						</view>
					</view>
				</view>
						<view class="container  mt20 mb20" style="background: #f3f3f3;"><u-divider color="#CCC" bg-color="#f3f3f3">~到底了,宝贝~</u-divider></view>
			</view>
			<view v-else class="container flex-xy">
				<view class="w100" style="height: 92rpx;"></view>
				<image src="../../static/noMsg.png" mode="widthFix" style="width: 60%;" class="pt50"></image>
			</view>
		</view>
		<!--  已完成  交易中   -->
		<view v-if="current == 1">
			<view v-if="jiaoYiZhong.length > 0">
				<view class="container flex-xy bgF pt20 pb20 mb20" v-for="(items, i) in jiaoYiZhong" v-bind:key="i">
					<view class="w90 flex-spc-x  pt20 pb20">
						<view class="w50">
							<image src="../../static/logo.png" mode="widthFix" style="width: 40rpx; height: 40rpx; " class="verticalM"></image>
							<text class="pl10">{{items.phone}}</text>
						</view>
						<view class="w50 tar fs24" style="color:red"></view>
					</view>
					<view class="container" style="height: 1px;background: #f3f3f3;"></view>
					<view class="w90 flex-spc-x pt20 pb20">
						<view class="w30 fs28 tal">
							<view class="co333">100</view>
							<view class="co999">{{items.count}}</view>
						</view>
						<view class="w30 fs28 tac">
							<view class="co333">{{items.money}}</view>
							<view class="co999">单价</view>
						</view>
						<view class="w30 fs28 tar">
							<view class="co333">{{items.total}}</view>
							<view class="co999">总价</view>
						</view>
					</view>
					<view class="container" style="height: 1px;background: #f3f3f3;"></view>
					<view class="w90 flex-spc-x  pt20">
						<text class="co666 fs24 w33">交易时间：{{items.createTime}}</text>
<!-- 						<view class="w33 fs24 " style="color: #00a2ff;">待支付</view>
						<view class="w33"><u-button class="customButtonStyle" shape="circle" type="primary" :ripple="true" size="mini" plain>操作</u-button></view> -->
					</view>
				</view>
						<view class="container  mt20 mb20" style="background: #f3f3f3;"><u-divider color="#CCC" bg-color="#f3f3f3">~到底了,宝贝~</u-divider></view>
			</view>
			<view v-else class="container flex-xy">
				<view class="w100" style="height: 92rpx;"></view>
				<image src="../../static/noMsg.png" mode="widthFix" style="width: 60%;" class="pt50"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '待处理'
				},
				{
					name: '已完成' //交易中
				}
			],

			current: 0, // tabs组件的current值，表示当前活动的tab选项
			status: 1, //查看类型 1- 待处理  2-交易中
			daiChuLi: [], //待处理
			jiaoYiZhong: [], //交易中  已完成
			pageSize: 15, //每页数量
			pageNum: 1 //页码
		};
	},
	methods: {
		revoke(i) {
			let that = this;
			var index = i;
			var obj = this.daiChuLi[index];
			uni.showModal({
				title: '撤销',
				content: '请问要撤销此条待处理交易吗？',
				success: function(res) {
					if (res.confirm) {
						// POST/mobileUser/purchase/revoke 撤销交易
						//     "orderId" : 35,
						//     "token" : "xQvS+UkT1fL87VtSn9XgjPNzca55QWVDXrdjhdRIsMY="
						var postObj = { url: '/mobileUser/purchase/revoke', data: { orderId: obj.orderId, token: uni.getStorageSync('y-token') } };
						that.postRequest(postObj)
							.then(res => {
								// console.log('res撤销交易 ', res);
								if (res.data.code == 200) {
									uni.showToast({
										title: '撤销成功！',
										mask: true,
										icon: 'success',
										duration: 500,
										success: () => {
											setTimeout(() => {
												that.pageNum = 1; //页码
												that.daiChuLi = [];
												that.getMyDeal(); //查询订单列表
											}, 500);
										}
									});
								}
							})
							.catch(err => {
								// console.log('err撤销交易 ', err);
							});
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},

		// tabs通知swiper切换
		tabsChange(index) {
			this.current = index;
			this.daiChuLi= [] //待处理
			this.jiaoYiZhong=[] //交易中  已完成
			if (index == 0) {
				this.status = 1;
				this.getMyDeal();
			}
			if (index == 1) {
				/*****************************************************/
				this.status = 2;
				this.getTransactionRecords();
			}
		},
		// POST/mobileUser/purchase/myDeal 我的交易
 		getMyDeal() {
			let postObj = {
				url: '/mobileUser/purchase/myDeal',
				data: {
					userId: uni.getStorageSync('y-userId'),
					status: this.status,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
			};
			this.postRequest(postObj)
				.then(res => {
					if (res.data.code == 200) {
						// console.log('我的交易', res.data.rows);
						// status: 1, //查看类型 1- 待处理  2-交易中
						if (this.status == 1) {
							this.daiChuLi = [...this.daiChuLi,...res.data.rows] ;
						}
						if (this.status == 2) {
							/*****************************************************/
							// this.jiaoYiZhong = res.data.rows;
						}
					}
				})
				.catch(err => {});
		},
		/*****************************************************/
		// GET/mobileUser/purchase/getTransactionRecords 已完成交易记录
		// 传userId
		// 可分页
		getTransactionRecords() {
			let getObj = {
				url: '/mobileUser/purchase/getTransactionRecords',
				data: {
					userId: uni.getStorageSync('y-userId'),
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
			};
			this.getRequest(getObj)
				.then(res => {
					if (res.data.code == 200) {
						// console.log('已完成交易记录', res.data.rows);
						this.jiaoYiZhong = [...this.jiaoYiZhong,...res.data.rows] ;
					}
				})
				.catch(err => {});
		}
	},
	onShow() {
		this.current = 0;
		this.status = 1;
		this.pageSize = 15; //每页数量
		this.pageNum = 1; //页码
		this.getMyDeal();
	},
	// 触底事件
	onReachBottom() {
		if (this.current == 0) {
			this.pageNum += 1;
			this.getMyDeal();
		}
		if (this.current == 1) {
			this.pageNum += 1;
			// this.getMyDeal();
			/*****************************************************/
			this.getTransactionRecords();
		}
	}
};
</script>

<style lang="less" scoped>
.customButtonStyle {
	width: 120rpx;
}
.fixhead {
	position: fixed;
	left: 0;
	top: 70rpx;
	z-index: 500;
}
</style>
